<script lang="ts" setup>
import { ref, reactive } from "vue";
import UniDataSelect from "../../uni_modules/uni-data-select/components/uni-data-select/uni-data-select.vue";
import UniIcons from "../../uni_modules/uni-icons/components/uni-icons/uni-icons.vue";
import BHeader from "../../components/header/bHeader.vue";

interface RouteItem {
  id: number;
  Name: string;
  PagePath: string;
  Url: string;
  updateBy: string;
  status: number;
}

const searchForm = reactive({
  name: "",
  status: "",
});

const statusOptions = reactive([
  { value: "", text: "全部" },
  { value: "1", text: "启用" },
  { value: "0", text: "禁用" },
]);

const tableData = ref<RouteItem[]>([
  {
    id: 1,
    Name: "用户管理",
    PagePath: "/system/user",
    Url: "/api/users/**",
    updateBy: "admin",
    status: 1,
  },
  {
    id: 2,
    Name: "角色管理",
    PagePath: "/system/role",
    Url: "/api/roles/**",
    updateBy: "admin",
    status: 1,
  },
  {
    id: 3,
    Name: "权限管理",
    PagePath: "/system/permission",
    Url: "/api/permissions/**",
    updateBy: "admin",
    status: 0,
  },
]);

const total = ref(100);
const pageSize = ref(10);
const currentPage = ref(1);
const popup = ref();
const dialogTitle = ref("");
const dialogContent = ref("");

const handleSearch = () => {
  // 实现搜索逻辑
  console.log("搜索条件：", searchForm);
};

const handleReset = () => {
  searchForm.name = "";
  searchForm.status = "";
};

const handleAdd = () => {
  dialogTitle.value = "新增路由";
  dialogContent.value = "确认新增该路由吗？";
  popup.value.open();
};

const handleEdit = (item: RouteItem) => {
  dialogTitle.value = "编辑路由";
  dialogContent.value = "确认编辑该路由吗？";
  popup.value.open();
};

const handleDelete = (item: RouteItem) => {
  dialogTitle.value = "删除路由";
  dialogContent.value = "确认删除该路由吗？";
  popup.value.open();
};

const handleStatusChange = (e: any, item: RouteItem) => {
  item.status = e.detail.value ? 1 : 0;
};

const handlePageChange = (e: { type: string; current: number }) => {
  currentPage.value = e.current;
};

const loadMore = () => {
  // 实现加载更多逻辑
  console.log("加载更多");
};

const handleDialogConfirm = () => {
  popup.value.close();
};

const handleDialogClose = () => {
  popup.value.close();
};
</script>


<template>

  <b-header title="路由管理" ></b-header>

  <view class="container">
    <!-- 头部区域 -->
    <view class="header">
      <view class="title-area">
        <text class="page-title">路由管理</text>
        <uni-button type="primary" @click="handleAdd">
          <uni-icons type="plusempty" size="16" />
          新增路由
        </uni-button>
      </view>

      <!-- 搜索区域 -->
      <view class="search-area">
        <view class="search-item">
          <text class="label">路由名称：</text>
          <input
              class="input"
              v-model="searchForm.name"
              placeholder="请输入路由名称"
          />
        </view>
        <view class="search-item">
          <text class="label">状态：</text>
          <uni-data-select
              v-model="searchForm.status"
              :localdata="statusOptions"
              placeholder="请选择状态"
          />
        </view>
        <view class="button-group">
          <uni-button type="primary" @click="handleSearch">搜索</uni-button>
          <uni-button @click="handleReset">重置</uni-button>
        </view>
      </view>
    </view>

    <!-- 表格区域 -->
    <view class="table-container">
      <view class="table-header">
        <view class="th" style="width: 80rpx">ID</view>
        <view class="th" style="width: 200rpx">路由名称</view>
        <view class="th" style="width: 240rpx">前端组件路径</view>
        <view class="th" style="width: 240rpx">接口路径</view>
        <view class="th" style="width: 160rpx">最后更新人</view>
        <view class="th" style="width: 120rpx">状态</view>
        <view class="th" style="width: 160rpx">操作</view>
      </view>

      <scroll-view scroll-y class="table-body" @scrolltolower="loadMore">
        <view
            v-for="(item, index) in tableData"
            :key="item.id"
            :class="['table-row', index % 2 === 0 ? 'row-even' : '']"
        >
          <view class="td" style="width: 80rpx">{{ item.id }}</view>
          <view class="td" style="width: 200rpx">{{ item.Name }}</view>
          <view class="td" style="width: 240rpx">{{ item.PagePath }}</view>
          <view class="td" style="width: 240rpx">{{ item.Url }}</view>
          <view class="td" style="width: 160rpx">{{ item.updateBy }}</view>
          <view class="td" style="width: 120rpx">
            <uni-switch
                :checked="item.status === 1"
                @change="(e) => handleStatusChange(e, item)"
            />
          </view>
          <view class="td operation" style="width: 160rpx">
            <view class="operation-btn" @click="handleEdit(item)">
              <uni-icons type="compose" size="16" color="#2979ff" />
              <text class="btn-text">编辑</text>
            </view>
            <view class="operation-btn" @click="handleDelete(item)">
              <uni-icons type="trash" size="16" color="#dd524d" />
              <text class="btn-text">删除</text>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 分页器 -->
    <view class="pagination">
      <uni-pagination
          :total="total"
          :pageSize="pageSize"
          :current="currentPage"
          @change="handlePageChange"
      />
    </view>

    <!-- 编辑弹窗 -->
    <uni-popup ref="popup" type="dialog">
      <uni-popup-dialog
          :title="dialogTitle"
          :content="dialogContent"
          :beforeClose="true"
          @confirm="handleDialogConfirm"
          @close="handleDialogClose"
      />
    </uni-popup>
  </view>
</template>


<style scoped lang="scss">

.container {
  height: 100%;
  padding: 30rpx;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
}

.header {
  background-color: #ffffff;
  padding: 30rpx;
  border-radius: 8px;
  margin-bottom: 20rpx;
}

.title-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.page-title {
  font-size: 18px;
  font-weight: bold;
  color: #333333;
}

.search-area {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.search-item {
  display: flex;
  align-items: center;
}

.label {
  font-size: 14px;
  color: #666666;
  margin-right: 10rpx;
}

.input {
  width: 300rpx;
  height: 70rpx;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 0 20rpx;
}

.button-group {
  display: flex;
  gap: 20rpx;
}

.table-container {
  flex: 1;
  background-color: #ffffff;
  border-radius: 8px;
  overflow: hidden;
}

.table-header {
  display: flex;
  background-color: #f2f2f2;
  padding: 20rpx 0;
}

.th {
  font-size: 14px;
  color: #606266;
  font-weight: bold;
  text-align: center;
  flex-shrink: 0;
}

.table-body {
  height: calc(100% - 80rpx);
}

.table-row {
  display: flex;
  padding: 20rpx 0;
  border-bottom: 1px solid #ebeef5;
}

.row-even {
  background-color: #fafafa;
}

.td {
  font-size: 14px;
  color: #606266;
  text-align: center;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operation {
  display: flex;
  justify-content: center;
  gap: 20rpx;
}

.operation-btn {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.btn-text {
  font-size: 14px;
  margin-left: 4rpx;
}

.pagination {
  margin-top: 20rpx;
  display: flex;
  justify-content: center;
}
</style>
